import Fade from "./Fade";
import Slide from "./Slide";

export enum TYPE {
    FADE = 'fade',
    SLIDE = 'slide'
}

interface IOptions {
    el: string;
    type?: TYPE | string;
}

function setEl(el: HTMLElement | string | undefined): HTMLElement {
    if (!el) throw new Error('"el" 必须存在');
    let _el: HTMLElement | null;
    if (typeof el === 'string') {
        const isMark: boolean = /^(\.|\#)/.test(el);
        if (!isMark) {
            _el = document.querySelector(`#${el}`) || document.querySelector(`.${el}`);
        } else {
            _el = document.querySelector(el);
        }
        if (!_el) throw new Error('不存在元素对象');
    }
    return _el;
}

function setType(type: TYPE | string | undefined): TYPE {

    if (!type) {
        return TYPE.FADE;
    }
    for (let k in TYPE) {
        if(TYPE[k] === type) {
            return type as TYPE;
        }
    }
    return TYPE.FADE;
}

function setClassName(el: HTMLElement, type: string) {
    const _el: HTMLElement = el;
    _el.className = `tab ${type}`;
    return _el;
}

export default class Tab {
    private _el: HTMLElement;
    private _type: TYPE | string;
    constructor(options: IOptions) {
        const { el, type }: IOptions = options;
        this._type = setType(type);
        this._el = setClassName(setEl(el), this._type);
    }


    /**
     * FADE 渐隐渐显
     * SLIDE 滚动
     */
    public create() {
        switch(this._type) {
            case TYPE.FADE:
                // 渐隐渐显
                return new Fade(this._el);
            case TYPE.SLIDE:
                // 滚动
                return new Slide(this._el);
            default:
                break;
        }
    }
}

